import React from 'react'
import {Col, Row,Radio } from "antd";

import {WeaLocaleProvider,WeaInputNumber,WeaCheckbox,WeaSelect} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

export default class SettingExtend extends React.Component{

    render (){
        const {setting,setSetting} = this.props
        const {isEjectImg,width,widthType,height,heightType,isAutoWidth,isAutoHeight,showWay,layoutType,sliderType,isHasSliderArrow,sliderSpeed,isShowTitle,titleFontSize} = setting
        const  sizeTypeOptions = [
            {
                key: "1",
                selected: true,
                showname: "px"
            },{
                key: "2",
                selected: false,
                showname: "%"
            }
        ]
        const  layoutTypeOptions = [
            {
                key: "1",
                selected: true,
                showname: "横向"
            },{
                key: "2",
                selected: false,
                showname: "纵向"
            }
        ]

        const sliderTypeTBOptions = [
            {
                key: "1",
                selected: true,
                showname: "无"
            },{
                key: "2",
                selected: true,
                showname: "向上"
            },{
                key: "4",
                selected: false,
                showname: "向下"
            }
        ]

        const sliderTypeLFOptions = [
            {
                key: "1",
                selected: true,
                showname: "无"
            },{
                key: "5",
                selected: false,
                showname: "向左"
            },{
                key: "3",
                selected: false,
                showname: "向右"
            }
        ]

        return (
            <div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yvy6p6`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4g69dc`} span={6} >
                            <div className="item-title">{getLabel(24051, '弹出设置')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bgm5pd`} span={18}>
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@dnmw2v`}
                                value={isEjectImg}
                                onChange={(value) => {
                                    setSetting({isEjectImg:value})
                                }}
                            />
                            <span style={{'margin-left':'5px'}}>{getLabel(24052, '弹出图片')}</span>

                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@a8vyvf`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pxr3mk`} span={6}>
                            <div className="item-title">{getLabel(386564, '图片大小')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@f3wt8t`} span={18}>
                            {
                                isAutoWidth == '0' ? (
                                    <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@freb7k`}>
                                        <span>{getLabel(390617, '宽度')} :</span>
                                        <div style={{display:'inline-block',width: '65px','vertical-align':'middle','margin-left':'5px'}}>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@gqkww6`} value={width} onChange={(value)=>{setSetting({width:value})}}></WeaInputNumber>
                                        </div>
                                        <div style={{display:'inline-block',width: '60px','vertical-align':'middle','margin-left':'5px'}}>
                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@he7f1h`}
                                                options={sizeTypeOptions}
                                                value={widthType}
                                                viewAttr={2}
                                                onChange={(v, showname) => {
                                                    setSetting({ widthType: v })
                                                }}
                                            />
                                        </div>
                                    </React.Fragment>

                                ) : null
                            }
                            {
                                (layoutType == '2' || showWay == '1')? (
                                    <div style={{display:'inline-block','margin-left':'5px'}}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@lo3xlk`}
                                            value={isAutoWidth}
                                            onChange={(value) => {
                                                setSetting({isAutoWidth:value})
                                            }}
                                        />
                                    </div>
                                ) : null
                            }

                            {
                                (layoutType == '2' || showWay == '1') ? (
                                    <span style={{'margin-left':'5px'}}>{getLabel(523669, '自适应宽度')}</span>
                                ) : null
                            }
                            {
                                isAutoHeight == '0' ? (
                                    <span style={{'margin-left':'5px'}}>{getLabel(207, '高度')} :</span>
                                ) : null
                            }
                            {
                                isAutoHeight == '0' ? (
                                    <div style={{display:'inline-block',width: '65px','vertical-align':'middle','margin-left':'5px'}}>
                                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@m9vjmf`} value={height} onChange={(value)=>{setSetting({height:value})}}></WeaInputNumber>
                                    </div>
                                ) : null
                            }
                            {
                                isAutoHeight == '0' ? (
                                    <div style={{display:'inline-block',width: '60px','vertical-align':'middle','margin-left':'5px'}}>
                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@pzlo1f`}
                                            options={sizeTypeOptions}
                                            value={heightType}
                                            viewAttr={2}
                                            onChange={(v, showname) => {
                                                setSetting({ heightType: v })
                                            }}
                                        />
                                    </div>
                                ) : null
                            }

                            {
                                (layoutType == '1' || showWay == '1') ? (
                                    <div style={{display:'inline-block','margin-left':'5px'}}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@je13n7`}
                                            value={isAutoHeight}
                                            onChange={(value) => {
                                                setSetting({isAutoHeight:value})
                                            }}
                                        />
                                    </div>
                                ) : null
                            }

                            {
                                (layoutType == '1' || showWay == '1') ? (
                                    <span style={{'margin-left':'5px'}}>{getLabel(22494, '自适应高度')}</span>
                                ) : null
                            }

                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@w51r3l`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nbmv08`} span={6}>
                            <div className="item-title">{getLabel(21653, '显示方式')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hr1sv9`} span={18}>
                            <Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@us5ith`} defaultValue="1" buttonStyle="solid" value={showWay} onChange={(e)=>{setSetting({showWay:e.target.value,isAutoHeight:'0',isAutoWidth:'0'})}}>
                                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@1rtd8q`} value="1">{getLabel(22920, '单张显示')}</Radio.Button>
                                <Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@7mtjpl`} value="2">{getLabel(22921, '多张显示')}</Radio.Button>
                            </Radio.Group>
                            {
                                showWay == '2' ? (
                                    <span style={{'margin-left':'5px'}}>{getLabel(19407, '布局')}</span>
                                ) : null

                            }
                            {
                                showWay == '2' ? (
                                    <div style={{display:'inline-block',width: '70px','vertical-align':'middle','margin-left':'5px'}}>
                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@tqfjf6`}
                                            options={layoutTypeOptions}
                                            value={layoutType}
                                            viewAttr={2}
                                            onChange={(v, showname) => {
                                                if(v == '1'){
                                                    setSetting({ layoutType: v ,sliderType:'5',isAutoHeight:'0',isAutoWidth:'0'})
                                                }else if(v == '2'){
                                                    setSetting({ layoutType: v ,sliderType:'4',isAutoHeight:'0',isAutoWidth:'0'})
                                                }
                                            }}
                                        />
                                    </div>
                                ) : null
                            }

                        </Col>
                    </Row>
                </div>
                {
                    showWay == '2' ? (
                        <div className="set-item">
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kwh54e`} type="flex" middle="middle">
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j0ifx8`} span={6}>
                                    <div className="item-title">{getLabel(20281, '滚动方向')} :</div>
                                    <div className="middle-box"></div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4d1raq`} span={18}>
                                    <div style={{display:'inline-block',width: '80px','vertical-align':'middle'}}>
                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@4pan5a`}
                                            options={layoutType == '1' ? sliderTypeLFOptions : sliderTypeTBOptions}
                                            value={sliderType}
                                            viewAttr={2}
                                            onChange={(v, showname) => {
                                                setSetting({ sliderType: v })
                                            }}
                                        />
                                    </div>
                                    <div style={{display:'inline-block','margin-left':'5px','vertical-align':'middle'}}>
                                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@j6gyz9`}
                                            value={isHasSliderArrow}
                                            onChange={(value) => {
                                                setSetting({isHasSliderArrow:value})
                                            }}
                                        />
                                    </div>
                                    <span style={{'margin-left':'5px'}}>{getLabel(22928, '滚动指向')}</span>

                                </Col>
                            </Row>
                        </div>
                    ) :  null
                }
                {
                    showWay == '2' && sliderType != '1' ? (
                        <div className="set-item">
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@wdyclw`} type="flex" middle="middle">
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@uud0ck`} span={6}>
                                    <div className="item-title">{getLabel(22927, '滚动速度')} :</div>
                                    <div className="middle-box"></div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@k2tdls`} span={18}>
                                    <div style={{display:'inline-block',width: '80px','vertical-align':'middle'}}>
                                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@jivpbx`} value={sliderSpeed} onChange={(value)=>{setSetting({sliderSpeed:value})}}></WeaInputNumber>
                                    </div> ms
                                </Col>
                            </Row>
                        </div>
                    ) : null
                }

                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@c6z0ze`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zp94pb`} span={6}>
                            <div className="item-title">{getLabel(31844, '标题设置')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ogdpva`} span={18}>
                            <span>{getLabel(386587, '显示标题栏')} :</span>
                            <div style={{display:'inline-block','vertical-align':'middle','margin-left':'5px'}}>
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@j3sbqi`}
                                    value={isShowTitle}
                                    display="switch"
                                    style={{display: 'inline'}}
                                    onChange={(value) => {
                                        setSetting({isShowTitle:value})
                                    }}
                                />
                            </div>
                            <span style={{'margin-left':'5px'}}>{getLabel(386588, '标题文字大小')} :</span>
                            <div style={{display:'inline-block',width: '60px','vertical-align':'middle','margin-left':'5px'}}>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ky7rr5`} value={titleFontSize} onChange={(value)=>{setSetting({titleFontSize:value})}}></WeaInputNumber>
                            </div> px
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}